<template>
	<view class="collections_item PF-R">
		<view class="top uni-white-bg">
			<view class="left uni-ml-32">
				共<text class="len_text ">{{list.length}}</text>个课程
			</view>
			<view class="right uni-mr-32">
				<span v-if="!isEdit" @click="isEdit=true">编辑</span>
				<span v-else @click="isEdit=false">删除</span>
			</view>
		</view>
		<checkbox-group @change="checkboxChange($event,'item')">
			<view v-for="(item, key) in list" :key="key" class="list-item">
				<label>
					<checkbox v-if="isEdit" :checked="item.checked" />
				</label>
				<view class="item-left">
					<image :src="item.icon" class="icon"></image>
				</view>
				<view class="item-right flex1 uni-ml-16">
					<view class="item-top">
						<view class="title basic-label PF-M line2">{{item.title}}</view>
						<view class="desc basic-label fs24 line2">{{item.desc}}</view>
					</view>
					<view class="item-bottom">
						<view class="disp center basic-label fs24">
							<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/address.png"
								mode="widthFix" class="adress_icons"></image>
							<view class="position">{{item.position}}</view>
						</view>

						<view class="money basic-label fs32">{{item.price}}</view>
					</view>
				</view>
			</view>
		</checkbox-group>
		<view class="bottom-btn" v-if="isEdit">
			<checkbox-group @change="checkboxChange($event,'all')">
				<label>
					<checkbox v-if="isEdit" :checked="isSelectAll" />
					全选
				</label>
			</checkbox-group>
			<button>取消收藏</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
				isSelectAll: false,
				list: [{
						title: '5天小众海滩+海韵椰林+休闲度假、+海南骑行冬令营',
						desc: '首创将骑行何休闲结合的模式，放...',
						position: '江苏.苏州',
						price: '￥2499/5天',
						icon: "https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/set_pic.png"
					},
					{
						title: '7天水上实操训练+模拟竞赛练习',
						desc: '学习航海文化、模拟竞赛练习...',
						position: '广东.广州',
						price: '￥2499/5天',
						icon: "https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/set_pic.png"
					}
				]
			}
		},
		methods: {
			checkboxChange(e,str) {
				console.log(e,e.detail.value,this.isSelectAll,this.list)
				if(str=='all'){
					
				}else{
					// e.detail.value
				}
				// if (e.name) {
				// 	this.list = this.list.map(item => {
				// 		item.checked = e.value
				// 		return item
				// 	})
				// } else {
				// 	this.isSelectAll = this.list.every(item => item.checked)
				// }
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f9f9f9;
	}

	.bottom-btn {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		align-items: center;

		button {
			font-size: 36rpx;
			padding: 8px 80rpx;
			color: #FFFFFF;
			background-color: #007E51;
		}
	}

	.list-item {
		margin: 20rpx 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.item-left {
			width: 200rpx;
			height: 200rpx;
			display: flex;

			.icon {
				flex: 1;
				height: 100%;
			}
		}

		.item-right {
			flex: 1;

			.item-top {
				width: 100%;

				.desc {
					color: #C0C4C1
				}
			}

			.item-bottom {
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;

				.adress_icons {
					width: 24rpx;
					height: 24rpx;
				}

				.position {
					color: #2649A4 !important;
				}

				.money {
					color: #F2450F !important;
				}
			}
		}
	}

	.container {
		padding: 30rpx;
		background-color: white;
		min-height: 100vh;
	}

	.top {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;

		.len_text {
			color: #F2450F;
			margin: 0 12rpx;
		}

		.left {
			span {
				color: red;
			}
		}

		.right {
			color: #0057FF
		}
	}
</style>